.SidebarFooter {
  $height: $AppFooterHeight;

  height: $height;

  @include media(md) {
    .-sidebar-compact-tablet & {
      height: auto;
    }
  }

  @include media-up(lg) {
    .-sidebar-compact-desktop & {
      height: auto;
    }
  }

  .SidebarFooterNav {
    width: 100%;
    display: flex;
    flex-direction: row;

    .-rtl & {
      flex-direction: row-reverse;
    }


    @include media(md) {
      .-sidebar-compact-tablet & {
        flex-direction: column-reverse;
      }
    }

    @include media-up(lg) {
      .-sidebar-compact-desktop & {
        flex-direction: column-reverse;
      }
    }
  }

  .NavLink {
    height: $height;
    font-weight: normal;
    display: flex;
    align-items: center;
    text-decoration: none;
    justify-content: center;
    transition: background-color .3s ease, color .3s ease;
    color: var(--SidebarNavColorText);
    // background-color: rgba(255, 255, 255, 0.09);
    padding: 0;
    flex: 1;
    font-size: 30px;

    &:hover {
      color: var(--SidebarNavColorText-active);
      // background-color: rgba(255, 255, 255, 0.05);
    }
  }

  .LinkCustomize {
    .-customize & {
      background-color: #fff;
      color: var(--colorPrimary);
    }
  }

  .LinkToggleHelp {
    @include media-down(sm) {
      display: none;
    }
  }

  .LinkToggleCompact {
    font-size: 42px;

    @include media-down(sm) {
      display: none;
    }

    @include media(md) {
      .-sidebar-compact-tablet:not(.-rtl) & {
        .Icon {
          transform: rotate(180deg);
        }
      }
    }

    @include media-up(lg) {
      .-sidebar-compact-desktop:not(.-rtl) & {
        .Icon {
          transform: rotate(180deg);
        }
      }
    }

  }

}
